<template>
    <div class="home">
        <p class="head-wrap">AntV 数据可视化测试</p>
        <div class="content-wrap">
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                <el-menu-item v-for="item in menuList" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
            </el-menu>
            <component :is="activeIndex"></component>
        </div>
    </div>
</template>

<script lang="ts">
import {ref, defineComponent} from "vue";
import {menu} from "@/type/demo.type.ts"
import G2 from "@/views/g2/G2.vue"
import S2 from "@/views/s2/S2.vue"
import G6 from "@/views/g6/G6.vue"
import X6 from "@/views/x6/X6.vue"
import L7 from "@/views/l7/L7.vue"

export default defineComponent({
    name: "Home",
    components: {
        G2, S2, G6, X6, L7
    },
    setup() {
        let activeIndex = ref<string>("L7")
        const menuList = ref<menu []>([
            {name: "L7|L7Plot", id: "L7"},
            {name: "G2|G2Plot", id: "G2"},
            {name: "S2", id: "S2"},
            {name: "G6|Graphin", id: "G6"},
            {name: "X6|XFlow", id: "X6"},
        ])
        const handleSelect = (key: string, keyPath: string[]) => {
            activeIndex.value = key
        }

        return {
            activeIndex, menuList, handleSelect
        }
    }
})
</script>
<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;
    .head-wrap {
        height: 100px;
        font-size: 40px;
        text-align: center;
        line-height: 100px;
        background-color: #a0cfff;
    }
    .content-wrap {
        height: calc(100% - 100px);
        :deep(.container) {
            height: calc(100% - 60px);
        }
    }
}
</style>
